<template>
  <!-- 横向排名 -->
  <div class="HorizeRankBar">
    <el-scrollbar wrap-class="hb-scroll">
      <div class="HorizeRankBar--list">
        <!-- 画的虚线 -->
        <div
          class="HorizeRankBar--dashedlist hb-scroll"
          :style="`left:${customOptions.labelWidth}px;right:${customOptions.numberWidth}px;bottom: -4px;top: 7px;`"
        >
          <div v-for="i in 10" :key="i" class="HorizeRankBar--dashedlist__item"></div>
        </div>
        <div v-for="(item, index) in configList" :key="index" class="HorizeRankBar--list__item">
          <div class="horizoBar">
            <el-tooltip v-if="item.tooltips" class="item" :content="item.tooltips" placement="top">
              <div class="horizoBar--label" :style="`--labelWidth: ${customOptions.labelWidth}px`">
                <span>{{ item.label }}</span>
              </div>
            </el-tooltip>
            <div v-else class="horizoBar--label" :title="item.label">
              <span>{{ item.label }}</span>
            </div>
            <div class="horizoBar--bar">
              <!-- 百分百的宽度 -->
              <div class="horizoBar--bar__all">
                <!-- 占比的宽度 -->
                <div class="percent" :style="item.style.percentStyle" />
              </div>
            </div>
            <div class="horizoBar--count" :style="`--numberWidth: ${customOptions.numberWidth}px`">
              {{ item.count }} {{ item.unit || '' }}
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { deepMerge } from '@/util/utils.js'
// 定义props属性
const props = defineProps({
  groups: {
    type: Array,
    default() {
      return [
        {
          name: '快速路', // name这个字段是用来展示的
          value: 123,
        },
        {
          name: '快23速路', // name这个字段是用来展示的
          value: 523,
        },
        {
          name: '快3速路', // name这个字段是用来展示的
          value: 323,
        },
        {
          name: '快4速路', // name这个字段是用来展示的
          value: 623,
        },
        {
          name: '快速5路', // name这个字段是用来展示的
          value: 223,
        },
        {
          name: '快3速路', // name这个字段是用来展示的
          value: 323,
        },
        {
          name: '快4速路', // name这个字段是用来展示的
          value: 623,
        },
        {
          name: '快速5路', // name这个字段是用来展示的
          value: 223,
        },
        {
          name: '快3速路', // name这个字段是用来展示的
          value: 323,
        },
        {
          name: '快4速路', // name这个字段是用来展示的
          value: 623,
        },
        {
          name: '快速5路', // name这个字段是用来展示的
          value: 223,
        },
      ]
    },
  },
  options: {
    type: Object,
    default() {
      // 克隆默认的 配置
      // const cloneOption = JSON.parse(JSON.stringify(defaultOption))
      return {
        labelWidth: 88, // 左侧 标签的宽度
        numberWidth: 64,
        unit: '', // 单位
        style: {
          // percentStyle: 'background-image: linear-gradient(90deg, #D2F3F3 0%, #00C6C4 93%);',
          percentStyle: '',
        },
      }
    },
  },
})
// 定义事件
const $emit = defineEmits(['choose'])
// 定义数据
const configList = ref([])
const defaultOption = {
  labelWidth: 88, // 左侧 标签的宽度
  numberWidth: 64,
  unit: '', // 单位
  style: {
    // percentStyle: 'background-image: linear-gradient(90deg, #D2F3F3 0%, #00C6C4 93%);',
    percentStyle: '',
  },
}
const customOptions = ref(defaultOption)
let max = -1 // 定义最大的数据

/* *************** 生命周期 ************* */
onMounted(() => {
  tansformOriginData()
})
/* *************** watch ************* */
watch(
  () => props.options,
  newOption => {
    const tempOption = newOption || {}
    customOptions.value = deepMerge(customOptions.value, tempOption)
    // console.log(customOptions.value)
  },
  {
    immediate: true,
  },
)
watch(
  () => props.groups,
  () => { tansformOriginData() }
)
/* *************** 方法 ************* */
// 计算出最大的值
function getMaxNum() {
  props.groups.forEach(item => {
    if (item.value > max) {
      max = item.value
    }
  })
  return max
}
// 将原始数据转为视图展示需要的数据格式,然后排序
function tansformOriginData() {
  const max = getMaxNum()
  const configListArr = []
  // 1. 将原始数据转为视图展示需要的数据格式
  props.groups.forEach(item => {
    const percent = parseFloat(((item.value / max) * 100).toFixed(2))
    // const { unit, style } = props.options
    const { unit, style } = customOptions.value
    const userPercentStyle = style.percentStyle || ''
    const percentStyle = `width: ${percent}%;${userPercentStyle}`
    configListArr.push({
      label: item.name,
      tooltips: item.name,
      percent,
      count: item.value,
      unit: unit || '',
      style: {
        // rankStyle: 'background: rgb(255, 88, 88);border-radius: 2px;',
        percentStyle,
      },
    })
  })
  // 2. 按照降序排列
  configListArr.sort((a, b) => {
    return b.count - a.count
  })
  configList.value = configListArr
}
// 用户选中的数据项
function selectItem(info) {
  $emit('choose', info)
}
</script>

<style scoped lang="scss">
.HorizeRankBar {
  width: 100%;
  height: 100%;
  position: relative;
  &--dashedlist {
    border-right: 1px dashed rgba(233, 233, 233, 1);
    display: flex;
    &__item {
      flex: 1;
      height: 100%;
      border-left: 1px dashed rgba(233, 233, 233, 1);
    }
  }
  &--list {
    position: relative;
    &__item {
      // width: 366px;
      width: 100%;
      height: 36px;
      // padding: 6px;
      // padding-top: 8px;
      margin-bottom: 32px;
      .horizoBar {
        display: flex;
        width: 100%;
        &--rank {
          margin-right: 14px;
          span {
            display: inline-block;
            text-align: center;
            width: 20px;
            height: 20px;
            background: #ff5858;
            border-radius: 2px;

            font-size: 14px;
            color: #ffffff;
            letter-spacing: 0;
            line-height: 20px;
            font-weight: 700;
          }
        }
        &--label {
          // width: 80px;
          width: var(--labelWidth);
          font-size: 14px;
          color: rgba(0, 0, 0, 0.7);
          letter-spacing: 0;
          line-height: 20px;
          font-weight: 400;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          position: relative;
          top: 14px;
        }
        &--bar {
          flex-grow: 1;
          position: relative;
          top: 8px;
          width: calc(100% - 178px);
          &__all {
            // width: 150px;
            width: 100%;
            height: 32px;
            background: rgba(157, 186, 213, 0.2);
            border-radius: 4px;
            position: relative;
            .percent {
              height: 100%;
              width: 50%;
              background-image: linear-gradient(75deg, #b5dbff 3%, #3ba0ff 100%);
              border-radius: 4px;
              position: relative;
              top: 0px;
              left: 0;
            }
          }
        }
        &--count {
          // width: 64px;
          width: var(--numberWidth);
          font-size: 14px;
          color: rgba(0, 0, 0, 0.7);
          letter-spacing: 0;
          text-align: right;
          line-height: 20px;
          font-weight: 400;
          position: relative;
          top: 14px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.hb-scroll {
  position: absolute;
  top: 0;
  right: 0px;
  left: 0;
  bottom: 17px; // 这是因为 el-scrollbar__wrap 控件使用了 margin-bottom: -17px
  // border: 1px solid rebeccapurple;
  overflow-x: hidden;
}
</style>
